
'use strict';

(function(angular){
var app = angular.module('echarts',['ngRoute']);
app.config(['$routeProvider',function($routeProvider){
    $routeProvider
    .when('/Echarts',{
        templateUrl:'echarts/echarts.html',
        controller:'echartsController'
    })
}]);
app.controller('echartsController',['$scope',function($scope){
    $scope.myChart = echarts.init(document.querySelector('#browser'));
    $scope.option = {
                title: {
                    text: '浏览器占比变化',
                    subtext: '纯属虚构',
                    x:'right',
                    y:'bottom'
                },
                tooltip: {
                    trigger: 'item',
                    backgroundColor : 'rgba(0,0,250,0.2)'
                },
                legend: {
                    data: (function (){
                        var list = [];
                        for (var i = 1; i <=28; i++) {
                            list.push(i + 2000 + '');
                        }
                        return list;
                    })()
                },
                visualMap: {
                    color: ['red', 'yellow']
                },
                radar: {
                   indicator : [
                       { text: 'IE8-', max: 400},
                       { text: 'IE9+', max: 400},
                       { text: 'Safari', max: 400},
                       { text: 'Firefox', max: 400},
                       { text: 'Chrome', max: 400}
                    ]
                },
                series : (function (){
                    var series = [];
                    for (var i = 1; i <= 28; i++) {
                        series.push({
                            name:'浏览器（数据纯属虚构）',
                            type: 'radar',
                            symbol: 'none',
                            itemStyle: {
                                normal: {
                                    lineStyle: {
                                      width:1
                                    }
                                },
                                emphasis : {
                                    areaStyle: {color:'rgba(0,250,0,0.3)'}
                                }
                            },
                            data:[
                              {
                                value:[
                                    (40 - i) * 10,
                                    (38 - i) * 4 + 60,
                                    i * 5 + 10,
                                    i * 9,
                                    i * i /2
                                ],
                                name: i + 2000 + ''
                              }
                            ]
                        });
                    }
                    return series;
                })()
            };
    $scope.myChart.setOption($scope.option);
}]);

















})(angular);